<template>
  <div>
    <el-card shadow="always">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form label-width="100px">
        <el-form-item label="状态:">
          <el-radio-group v-model="reqParams.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道:">
          <!-- <el-select clearable v-model="reqParams.channel_id" placeholder="请选择频道">
            <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
          <GeekChannel v-model="reqParams.channel_id"/>
        </el-form-item>
        <el-form-item label="日期:">
          <!-- 日期选择器  type="daterange" 范围选择 -->
          <el-date-picker @change="changeDate" v-model="dateArr" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item>
          <el-button @click="filter()" type="primary">查询</el-button>
          {{ reqParams }}
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 筛选结果 -->
    <el-card shadow="always" style="margin-top:20px">
      <div slot="header">
        <p>根据筛选条件共查询到xx条结果</p>
      </div>
      <!-- 表格 -->
      <el-table :data="articleList">
        <!-- 封面 标题 状态 发布时间 阅读数 评论数 点赞数 操作 -->
        <el-table-column label="封面">
          <!-- slot-scope="scope" 作用域插槽 -->
          <template slot-scope="scope">
            <!-- <img :src="scope.row.cover.images[0]" style="width: 100px; height: 100px" /> -->
            <!-- <p>{{ scope.row.cover.images[0] }}</p> -->

            <!-- scope.row 相当于 循环时的 item 项目 -->
            <!-- el-image 支持 preview-src-list 大图预览，fit 属性设置图片不变形 -->
            <el-image :src="scope.row.cover.images[0]" :preview-src-list="scope.row.cover.images"
              style="width: 100px; height: 100px" fit="cover">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" width="200"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="danger">审核失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate" width="200"></el-table-column>
        <el-table-column label="阅读数" prop="read_count"></el-table-column>
        <el-table-column label="评论数" prop="comment_count"></el-table-column>
        <el-table-column label="点赞数" prop="like_count"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="$router.push(`publish/${scope.row.id}`)" type="primary" size="mini">编辑</el-button>
            <el-button @click="del(scope.row.id)" type="danger" size="mini">删除</el-button>
            <!-- 作用域插槽中提出id备用 -->
            {{ scope.row.id }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px;" :total="total" :page-sizes="[2, 5, 10, 20]"
        :page-size.sync="reqParams.per_page" :current-page.sync="reqParams.page" @current-change="getArticleList"
        @size-change="getArticleList" layout="total, sizes, prev, pager, next, jumper" />
    </el-card>
  </div>
</template>
<script>
export default {
  // 行为
  name: 'AriticleView',
  data () {
    return {
      reqParams: {
        status: null,
        channel_id: null, // 频道ID
        begin_pubdate: null, // 开始时间
        end_pubdate: null, // 截止时间
        page: 1, // 当前页码
        per_page: 10 // 页容量

      },
      // 下拉选框列表
      // channelList: [

      // ],
      // 日期数组(用于前端收集)
      dateArr: [],
      // 文章列表(用于表格渲染)
      articleList: [],
      // 文章总数
      total: 0

    }
  },
  // 侦听器
  watch: {
    // 侦听日期数组变化
    dateArr: {
      // 深度侦听
      deep: true,
      // 侦听的对象变化时触发 handler 回调函数
      handler (value) {
        // 如果 value 为 null，表示清空了日期，清空 开始时间 和 截止时间
        if (value === null) {
          this.reqParams.begin_pubdate = null
          this.reqParams.end_pubdate = null
        } else {
          // 获取日期数组，分别赋值给 开始时间 和 截止时间
          this.reqParams.begin_pubdate = value[0]
          this.reqParams.end_pubdate = value[1]
        }
      }
    }
  },
  created () {
    // this.getCannelList()
    this.getArticleList()
  },
  methods: {
    // async getCannelList () {
    //   const res = await this.$http.get('/v1_0/channels')
    //   //   console.log(res)

    //   this.channelList = res.data.data.channels
    // },
    // 封装-获取文章列表
    async getArticleList () {
      const res = await this.$http.get('/v1_0/mp/articles', { params: this.reqParams })
      // console.log(res)
      // 保存文章列表
      this.articleList = res.data.data.results
      // 保存文章总数
      this.total = res.data.data.total_count
    },
    filter () {
      this.reqParams.page = 1
      this.getArticleList()
    },
    // 删除文章
    del (id) {
      // MessageBox 弹框，删除操作需二次确认
      this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 注意：这里必须添加 await 等待删除请求结束，再获取文章列表
        await this.$http.delete(`/v1_0/mp/articles/${id}`)
        // 重新获取文章列表（刷新表格）
        this.getArticleList()
        // 删除成功轻提示
        this.$message.success('删除成功!')
      }).catch(() => {
        // 用户点击取消时触发，但是不能省略 catch，否则控制台会报错
      })
    }
  }
}
</script>
<style>
/*样式*/
</style>
